Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Generate a stable options object post-normalization #75

Closed
wants to merge 2 commits into from
Closed

Generate a stable options object post-normalization #75

wants to merge 2 commits into from

Conversation

btraut
Copy link

@btraut btraut commented Oct 22, 2021

While trying to install one of the hooks in my project, I noticed that the reset function is not stable through renders. The root cause is that you call normalizeOptions and produce a new options object every render which totally defeats the purpose of wrapping reset in a useCallback.

This PR memoizes the options object (post-normalization) so reset is stable. Note that this will still produce unstable options if the user is passing an anonymous initialState or any other function, but at least it'll handle the common cases such as passing no options at all.

Copy link
Owner

@slorber slorber left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks

I'd rather use a more reliable implementation and it would be nice to ensure callback stability with some tests too

@@ -238,9 +239,12 @@ const useAsyncInternal = <R = UnknownResult, Args extends any[] = UnknownArgs>(

const normalizedOptions = normalizeOptions<R>(options);

// Use memoization to produce a stable options object post-normalization.
const memoizedOptions = useMemo(() => normalizedOptions, Object.values(normalizedOptions));
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great catch

Unfortunately it won't work if values are updated, which may be the case because some options are callbacks and users might provide inlined arrow functions

I suggest using the useGetter() hook above to solve this more reliably once for all

  const getLatestOptions = useGetter(options);

  const reset = useCallback(() => setValue(getLatestOptions().initialState(getLatestOptions())), [
    setValue,
    getLatestOptions,
  ]);

(also worth applying to other methods as well, we don't follow the rules of hooks very strictly here 😅 )

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right, this still isn't stable if anon callbacks are passed, but it at least handles the case of empty options being passed (a potentially common use case).

Thanks for linking to your issue on useGetter in the code. It was fascinating to see other lib/hook authors face these changes. I don't want to pull the argument over here, but my read on the responses is that the useGetter pattern is pretty dangerous to use. In my limited experience, I've gone to great lengths to keep callbacks stable and I've documented to users what they are responsible for memoizing. It's an uphill battle and we need help from React core to make it easier, but I feel it's the safest solution in userland.

I don't feel comfortable updating to useGetter. If you'd like this PR as is, go ahead and merge it. Otherwise, I recommend closing it out or commandeering.

@btraut btraut closed this Jun 12, 2022
@btraut
Copy link
Author

btraut commented Jun 12, 2022

I'm closing this because I switched to a different lib and no longer even have a repro in my code. Perhaps the new React hooks will make this trivial.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants